<script setup lang="jsx">
import CommonList from "@/components/CommonList.vue";
import CommonDialog from "@/components/CommonDialog.vue";
import { useCommonQuery } from "@/composables/useCommonQuery.js";
import { itlcloudApi } from "@/api/disinfect/map-manage.js";
import { getAbleList } from "@/api/common/company.js";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { Plus } from "@element-plus/icons-vue";
import { defaultRules as rules } from "@/utils/defind.js";
import { ElMessageBox } from "element-plus";

// 查询配置
const queryOptions = {
  queryApi: itlcloudApi.queryAll,
  createApi: itlcloudApi.create,
  updateApi: itlcloudApi.update,
  deleteApi: itlcloudApi.delete,
};

// 通用查询方法
const {
  tableData,
  loading,
  dialogParams,
  queryParams,
  pagingParams,
  handleQuery,
  handleConfirm,
  handleDelete,
  handleReset,
} = useCommonQuery(queryOptions);

// 请求查询
handleQuery();

// 获取公司列表
const companyList = ref([]);
(async function () {
  const {
    data: { list = [] },
  } = await getAbleList();
  companyList.value = list;
})();

// 弹窗配置
const itlcloudOptions = reactive({
  labelWidth: 120,
  dialogWidth: 600,
});

const itlcloudFormData = ref({});

// 弹窗表单项
const itlcloudFormItem = ref([
  { prop: "name", label: "配置名称", rules },
  { prop: "appId", label: "App ID", rules },
  { prop: "projectId", label: "Project ID", rules },
  { prop: "appSecret", label: "App Secret", rules },
  { prop: "appCode", label: "App Code", rules },
  {
    prop: "robotId",
    label: "机器人 ID",
    rules,
    hide: false,
    customRender() {
      return (
        <el-select
          class="w-full"
          multiple
          filterable
          allow-create
          default-first-option
        ></el-select>
      );
    },
  },

  {
    prop: "companyId",
    label: "公司名称",
    rules,
    customRender() {
      return (
        <el-select class="w-full">
          {companyList.value.map((item) => {
            return (
              <el-option
                label={item.name}
                value={item.id}
                data-test="company-name-item"
              ></el-option>
            );
          })}
        </el-select>
      );
    },
  },
]);

const columns = ref([
  { prop: "id", label: "编号", width: 80 },
  { prop: "name", label: "名称", width: 180 },
  { prop: "appId", label: "App ID", width: 200 },
  { prop: "projectId", label: "Project ID", width: 120 },
  {
    prop: "companyId",
    label: "公司名称",
    width: 240,
    customRender(row) {
      const result = companyList.value.find((item) => {
        return row.companyId === item.id;
      });
      if (result) {
        return result.name;
      }
    },
  },
  {
    label: "操作",
    prop: "action",
    width: 280,
    fixed: "right",
    customRender(row) {
      return (
        <div>
          <el-button
            type="primary"
            text
            bg
            onClick={() => synchronousElevator(row.id)}
          >
            查看电梯
          </el-button>
          <el-button type="primary" text bg onClick={() => openDialog(row)}>
            编辑
          </el-button>
          <el-button type="danger" text bg onClick={() => handleDelete(row.id)}>
            删除
          </el-button>
        </div>
      );
    },
  },
]);

const queryItem = ref([
  { prop: "id", placeholder: "编号" },
  { prop: "name", placeholder: "名称" },
  { prop: "appId", placeholder: "App ID" },
  { prop: "projectId", placeholder: "Project ID" },
]);

function openDialog(row) {
  if (row) {
    itlcloudFormItem.value[5].hide = true;
    itlcloudFormData.value = { ...row };
  } else {
    itlcloudFormItem.value[5].hide = false;
  }
  dialogParams.title = row ? "编辑" : "新增";
  dialogParams.visible = true;
}

let router = useRouter();
function synchronousElevator(id) {
  router.push({ name: "disinfect-map-elevator-list", query: { id } });
}

async function itlcloudDialogConfirm() {
  await ElMessageBox.confirm("确认继续操作吗", "警告");
  handleConfirm(itlcloudFormData.value);
}

function itlcloudDialogClose() {
  itlcloudFormData.value = {};
  dialogParams.visible = false;
}
</script>
<template>
  <div class="h-main p-4 flex flex-col gap-4">
    <div>
      <el-button type="primary" :icon="Plus" @click="openDialog()">
        添加配置
      </el-button>
    </div>
    <CommonList
      data-test="common-list"
      :table-data="tableData"
      :loading="loading"
      :table-columns="columns"
      :query-params="queryParams"
      :query-item="queryItem"
      :paging-params="pagingParams"
      @handle-query="handleQuery"
      @handle-reset="handleReset"
    ></CommonList>
    <CommonDialog
      :dialog-params="dialogParams"
      :form-data="itlcloudFormData"
      :options="itlcloudOptions"
      :form-item="itlcloudFormItem"
      @close="itlcloudDialogClose"
      @confirm="itlcloudDialogConfirm"
    ></CommonDialog>
  </div>
</template>
